<template>
  <div v-if="status" class="loading">
    <div>loading...</div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

const status = ref<boolean>(false)

const show = () => status.value = true
const hide = () => status.value = false

// 暴露出组件的方法属性
defineExpose({
    show,
    hide,
    status
})
</script>
<style scoped>
.loading {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    color: aliceblue;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;

}
</style>